<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title>Topics</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="../vendors/font-awesome.min.css">
	<link rel="stylesheet" href="../styles.css">

</head>

<body>

<div class="layout">
	<div class="layout__header">
		<a class="header__logo" href="#">Spirit</a>
	</div>

	<div class="layout__profile">
		<div class="profile__img">
			<img class="profile__img__avatar" src="avatar.png" />
			<div class="profile__img__username">nitely</div>
		</div>

		<div class="profile__info">
			<ul>
				<li>
					<div class="profile__info__title">Joined at</div>
					<div class="profile__info__date">1 Ene</div>
				</li>
				<li>
					<div class="profile__info__title">Last post</div>
					<div class="profile__info__date">3 hours</div>
				</li>
				<li>
					<div class="profile__info__title">Seen</div>
					<div class="profile__info__date">2 hours</div>
				</li>
			</ul>
		</div>

		<div class="profile__private_message">
			<a class="button" href="#"><i class="fa fa-envelope"></i> Private Message</a>
		</div>
    <div class="profile__profile_preferences">
      <a class="button" href="#"><i class="fa fa-cog"></i> Preferences</a>
    </div>

		<ul class="nav__tabs">
			<li><a class="nav__tabs__link is-selected" href="#" >Deleted</a></li>
			<li><a class="nav__tabs__link" href="#" >Locked</a></li>
			<li><a class="nav__tabs__link" href="#" >Pinned</a></li>
			<li><a class="nav__tabs__link" href="#" >Pinned</a></li>
			<li><a class="nav__tabs__link" href="#" >Pinned</a></li>
			<li><a class="nav__tabs__link" href="#" >Pinned</a></li>
		</ul>

		<div class="comments_list">
			<div class="comments_list__comment no-footer">
				<div class="comment__img">
					<img class="comment__img__avatar" src="avatar.png" />
				</div>
				<div class="comment__info">
					<div class="comment__info__username">
						<a class="comment__info__username__link" href="#">nitely</a>
						<div class="comment__info__username__realname">Esteban Castro Borsani</div>
					</div>
					<ul class="comment__info__date">
						<li class="comment__info__date__topic"><a href="#"><i class="fa fa-comments"></i> Topic foobar foobar foobar foobar foobar</a></li>
						<li><a href="#"><i class="fa fa-pencil"></i> 3</a></li>
						<li>4h</li>
					</ul>
				</div>
				<div class="comment__text">
					<p>texto normal</p>
					<p>texto normal long long long long long long long long longs</p>
				</div>
			</div>

			<div class="comments_list__comment no-footer">
				<div class="comment__img">
					<img class="comment__img__avatar" src="avatar.png" />
				</div>
				<div class="comment__info">
					<div class="comment__info__username">
						<a class="comment__info__username__link" href="#">nitely</a>
						<div class="comment__info__username__realname">Esteban Castro Borsani</div>
					</div>
					<ul class="comment__info__date">
						<li><a href="#"><i class="fa fa-pencil"></i> 3</a></li>
						<li>4h</li>
					</ul>
				</div>
				<div class="comment__text">
					<p>texto normal</p>
				</div>
			</div>

		</div>
	</div>

      <div class="layout__footer">
        <a class="footer__logo" href="http://www.spirit-project.com" >Spirit</a>
      </div>
    </div>

    </body>

    </html>
